<template>
	<view>
		<u-navbar back-icon-color="#fff" :back-text-style="{color:'#fff'}" :border-bottom="false" :is-back="true"
			back-text="统计分析" :background="{ background:'#357BED'}"></u-navbar>
		<u-tabs :bar-width="110" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="" style="height: 10px;"></view>
		<view style="padding: 30rpx 0;background: white;" v-show="current==0">
			<u-table border-color="white">
				<u-tr>
					<u-th width="300rpx">设备类型</u-th>
					<u-th>总数</u-th>
					<u-th>正常</u-th>
					<u-th>异常</u-th>
					<u-th>报警</u-th>
				</u-tr>
				<u-tr v-for="(item,index) in listData" :key="index">
					<u-td width="280rpx">{{item.DeviceTypeTxt}}</u-td>
					<u-td>{{item.TotalNum}}</u-td>
					<u-td>{{item.OnLineNum}}</u-td>
					<u-td>{{item.OffLineNum}}</u-td>
					<u-td>{{item.YjNum}}</u-td>
				</u-tr>
			</u-table>
		</view>
		<view class="" v-show="current==1" style="height:calc(100vh - 180px);background-color: white;">
			<l-echart ref="chart"></l-echart>
			<view class="" style="color: #79BDDE;background: white;text-align:center;padding: 20rpx 0;">
				以上为近一年数据
			</view>
		</view>

		<view class="" style="height:calc(100vh - 140px);background-color: white;" v-show="current==2">
			<l-echart ref="piechart"></l-echart>
			<view class="" style="position: fixed;bottom: 15%;width: 100%;z-index: 100;text-align: center;">
				<u-switch size="60" v-model="checked"></u-switch>
				<view class="">{{checked?'近半年':'近一月'}}</view>
			</view>
		</view>

	</view>

</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
	export default {
		data() {
			return {
				list: [{
					name: '设备统计'
				}, {
					name: '报警统计'
				}, {
					name: '任务统计',
				}],
				current: 0,
				checked:false,
				listData:[]

			};
		},
		methods: {
			getDataList(){
				this.$axios.post('Device/XDeviceQueryNum',{...this.$util.getUserInfo()},p=>{
					console.log(p.data)
					this.listData=JSON.parse(p.data)
				})
			},
			change(index) {
				this.current = index;
				if (index == 1) {
					this.$nextTick(() => {
						this.barCharts()
					})
				}
				if (index == 2) {
					this.$nextTick(() => {
						this.pieCharts()
					})
				}
			},
			pieCharts() {
				this.$refs.piechart.init(config => {
					const {
						canvas
					} = config;
					const chart = echarts.init(canvas, null, config);
					canvas.setChart(chart);
					let option = {
						tooltip: {
							trigger: 'item'
						},
						legend: {
							bottom: '30%',
							left: 'center',
						},
						series: [{
							name: '访问来源',
							type: 'pie',
							radius: ['25%', '50%'],
							center: ['45%', '30%'],
							label: {
								show: true,
								position: 'outside',
								color: 'auto',
								formatter(params) {
									return '数量:' + params.value + '件' + '\n' + '占比:' + params.percent +
										"%"
								}
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '16',
								}
							},
							labelLine: {
								length: 4,
								show: true
							},
							data: [{
									value: 1048,
									name: '未完成量'
								},
								{
									value: 735,
									name: '检查中量'
								},
								{
									value: 580,
									name: '已完成量'
								},
							]
						}]
					};
					chart.setOption(option);
					return chart; // 需要把 chart 返回
				});

			},
			barCharts() {
				this.$refs.chart.init(config => {
					const {
						canvas
					} = config;
					const chart = echarts.init(canvas, null, config);
					canvas.setChart(chart);
					let option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								// 坐标轴指示器，坐标轴触发有效
								type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							},
							confine: true
						},
						grid: {
							left: 20,
							right: 20,
							bottom: 15,
							top: 40,
							containLabel: true
						},
						xAxis: [{
							type: 'value',
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							}
						}],
						yAxis: [{
							type: 'category',
							axisTick: {
								show: false
							},
							data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11',
								'12'
							],
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							}
						}],
						series: [{
							name: '热度',
							type: 'bar',
							label: {
								normal: {
									show: true,
									position: 'inside'
								}
							},
							data: [300, 270, 340, 344, 300, 320, 310, 300, 270, 340, 344, 300, 320,
								310],
							itemStyle: {
								borderRadius: [0, 15, 15, 0]
								// emphasis: {
								// 	color: '#37a2da'
								// }
							}
						}]
					}
					chart.setOption(option);
					return chart; // 需要把 chart 返回
				});
			}
		},
		mounted() {
			this.getDataList()


		}
	}
</script>

<style>

</style>
